Mestre VS Code-utvikling av utvidelser: En omfattende veiledning for globale utviklere

Visual Studio Code (VS Code) har blitt den foretrukne kodeeditoren for millioner av utviklere over hele verden. Populariteten skyldes dens lette natur, kraftige funksjoner og, viktigst av alt, dens utvidbarhet. Muligheten til å lage tilpassede utvidelser lar utviklere skreddersy editoren til deres spesifikke behov, øke produktiviteten og effektivisere arbeidsflyter. Denne omfattende veiledningen vil veilede deg gjennom prosessen med å lage dine egne VS Code-utvidelser, fra innledende oppsett til publisering av din kreasjon for resten av verden.

Hvorfor utvikle VS Code-utvidelser?

Utvikling av VS Code-utvidelser gir en rekke fordeler, både for individuelle utviklere og organisasjoner:

• Personlig tilpasset arbeidsflyt: Tilpass editoren slik at den passer perfekt til din kodestil og prosjektkrav.
• Økt produktivitet: Automatiser repeterende oppgaver, integrer med eksterne verktøy og effektiviser utviklingsprosessen.
• Forbedret samarbeid: Del utvidelser med teamet ditt eller det bredere fellesskapet for å standardisere arbeidsflyter og forbedre kodekvaliteten.
• Læring og kompetanseutvikling: Få erfaring med TypeScript, Node.js og VS Code API åpner for nye karrieremuligheter.
• Bidrag til fellesskapet: Del dine innovative løsninger med det globale utviklerfellesskapet og bidra til økosystemet.

Forutsetninger

Før du dykker ned i utvidelsesutvikling, må du sørge for at du har følgende installert:

• Node.js og npm (Node Package Manager): VS Code-utvidelsesutvikling er sterkt avhengig av Node.js. Last ned og installer den nyeste LTS-versjonen fra den offisielle Node.js-nettsiden. npm installeres automatisk med Node.js.
• Visual Studio Code: Forsikre deg om at du har den nyeste versjonen av VS Code installert.
• Yeoman og VS Code-utvidelsesgeneratoren: Yeoman er et stillasverktøy som forenkler utvidelsesopprettelsesprosessen. Installer den globalt ved hjelp av npm:

            npm install -g yo generator-code
            

              
                Copy
              
            
          

Sette opp utviklingsmiljøet ditt

Med forutsetningene på plass er du klar til å sette opp utviklingsmiljøet ditt:

1. Opprett et nytt utvidelsesprosjekt: Åpne terminalen og kjør følgende kommando for å starte utvidelsesgeneratoren:

            yo code
            

              
                Copy
              
            
          

2. Svar på spørsmålene: Generatoren vil stille en rekke spørsmål om utvidelsen din. Her er en oversikt over vanlige spørsmål og anbefalte svar:
   • Hvilken type utvidelse vil du opprette? Velg "Ny utvidelse (TypeScript)" for en TypeScript-basert utvidelse, som er den anbefalte tilnærmingen.
   • Hva er navnet på utvidelsen din? Velg et beskrivende og unikt navn for utvidelsen din. Eksempler: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete."
   • Hva er identifikatoren for utvidelsen din? Dette er en unik identifikator for utvidelsen din, vanligvis i formatet `utgiver.utvidelsesnavn`. Velg et utgivernavn (f.eks. GitHub-brukernavnet ditt eller firmanavnet).
   • Hva er beskrivelsen av utvidelsen din? Gi en kort og informativ beskrivelse av hva utvidelsen din gjør.
   • Initialiser et git-repository? Velg "Ja" for å initialisere et Git-repository for versjonskontroll.
   • Vil du bruke eslint til å lint koden? Velg "Ja" for å håndheve konsistens i kodestilen.
3. Åpne prosjektet i VS Code: Når generatoren er fullført, åpner du den nyopprettede prosjektmappen i VS Code.

Forstå prosjektstrukturen

Utvidelsesgeneratoren oppretter en grunnleggende prosjektstruktur med følgende viktige filer:

• `package.json`: Denne filen inneholder metadata om utvidelsen din, inkludert navn, versjon, beskrivelse, avhengigheter og aktiveringshendelser.
• `tsconfig.json`: Denne filen konfigurerer TypeScript-kompilatoren.
• `.vscode/launch.json`: Denne filen konfigurerer feilsøkingen for utvidelsen din.
• `src/extension.ts`: Dette er hovedinngangspunktet for utvidelsen din. Den inneholder funksjonene `activate` og `deactivate`.
• `README.md`: En markdown-fil som gir en beskrivelse av utvidelsen din, hvordan du bruker den og all relevant informasjon.

Skrive din første utvidelse

La oss starte med å lage en enkel utvidelse som viser en "Hello World"-melding når en kommando utføres:

1. Åpne `src/extension.ts`: Denne filen inneholder `activate`-funksjonen, som kalles når utvidelsen din aktiveres.
2. Endre `activate`-funksjonen: Erstatt den eksisterende koden med følgende:

            import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Gratulerer, utvidelsen din "my-extension" er nå aktiv!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World fra Min Utvidelse!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
            

              
                Copy
              
            
          

3. Forklaring:
   • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registrerer en kommando med ID-en `my-extension.helloWorld`. Denne kommandoen vil være tilgjengelig i VS Code-kommandopaletten.
   • `vscode.window.showInformationMessage('Hello World fra Min Utvidelse!')`: Viser en informasjonsmelding i VS Code-vinduet.
   • `context.subscriptions.push(disposable)`: Legger kommandoen til utvidelsens abonnementer, og sikrer at den avhendes på riktig måte når utvidelsen deaktiveres.
4. Endre `package.json`: Legg til følgende i `contributes`-delen for å definere kommandoen:

            "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
            

              
                Copy
              
            
          

5. Forklaring:
   • `"commands"`: Definerer kommandoene som utvidelsen din bidrar med.
   • `"command": "my-extension.helloWorld"`: Spesifiserer kommando-ID-en som samsvarer med ID-en som brukes i `extension.ts`.
   • `"title": "Hello World"`: Angir visningsnavnet for kommandoen i kommandopaletten.

Teste utvidelsen din

Nå er det på tide å teste utvidelsen din:

1. Trykk F5: Dette vil starte et nytt VS Code-vindu med utvidelsen din installert. Dette er "Utvidelsesutviklingsvert".
2. Åpne kommandopaletten: Trykk `Ctrl+Shift+P` (eller `Cmd+Shift+P` på macOS) for å åpne kommandopaletten.
3. Skriv "Hello World": Du skal se kommandoen din oppført i kommandopaletten.
4. Velg "Hello World": Hvis du klikker på kommandoen, utføres den og viser "Hello World"-meldingen i VS Code-vinduet.

Feilsøke utvidelsen din

Feilsøking er avgjørende for å identifisere og fikse problemer i utvidelsen din. VS Code gir utmerket feilsøkingsstøtte:

1. Sett inn bruddpunkter: Klikk i editorens marg ved siden av linjenumrene for å sette inn bruddpunkter i koden din.
2. Trykk F5: Dette vil starte Utvidelsesutviklingsvert i feilsøkingsmodus.
3. Utløs utvidelsen din: Utfør kommandoen eller handlingen som utløser koden du vil feilsøke.
4. Inspiser variabler og kallstabel: VS Code-feilsøkeren vil pause utførelsen ved bruddpunktene dine, slik at du kan inspisere variabler, gå gjennom koden og undersøke kallstabelen.

Arbeide med VS Code API

VS Code API gir et rikt sett med grensesnitt og funksjoner for å samhandle med editoren. Her er noen viktige områder av API-et:

• `vscode.window`: For å samhandle med VS Code-vinduet, vise meldinger, vise inndatabokser og administrere paneler.
• `vscode.workspace`: For å få tilgang til og manipulere arbeidsområdet, inkludert filer, mapper og konfigurasjonsinnstillinger.
• `vscode.commands`: For å registrere og utføre kommandoer.
• `vscode.languages`: For å gi språkstøtte, for eksempel syntaksutheving, kodefullføring og diagnostikk.
• `vscode.debug`: For å samhandle med feilsøkeren.
• `vscode.scm`: For å samhandle med kildekodekontrollsystemer som Git.

Eksempel: Opprette en kodebitutvidelse

La oss opprette en utvidelse som legger til en kodebit for å opprette en grunnleggende React-komponent:

1. Opprett en `snippets`-mappe: Opprett en ny mappe med navnet `snippets` i roten av prosjektet ditt.
2. Opprett en bitfil: Opprett en fil med navnet `react.json` inne i `snippets`-mappen.
3. Legg til bitdefinisjonen: Legg til følgende JSON i `react.json`:

            {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
\n\t\t\t${2:Content}\n\t\t
\n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
            

              
                Copy
              
            
          

4. Forklaring:
   • `"React Component"`: Navnet på kodebiten.
   • `"prefix": "reactcomp"`: Prefikset som utløser kodebiten. Hvis du skriver `reactcomp` og trykker `Tab`, settes kodebiten inn.
   • `"body"`: En rekke strenger som representerer kodelinjene i kodebiten.
   • `${1:ComponentName}`: En tabulatorstopp som lar deg raskt endre komponentnavnet.
   • `"description"`: En beskrivelse av kodebiten.
5. Endre `package.json`: Legg til følgende i `contributes`-delen:

            "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
            

              
                Copy
              
            
          

6. Forklaring:
   • `"snippets"`: Definerer kodebitene som utvidelsen din bidrar med.
   • `"language": "javascriptreact"`: Spesifiserer språket som kodebiten er aktuelt for.
   • `"path": "./snippets/react.json"`: Spesifiserer banen til bitfilen.
7. Test kodebiten din: Åpne en `.jsx`- eller `.tsx`-fil og skriv `reactcomp`. Trykk `Tab` for å sette inn kodebiten.

Avanserte teknikker for utvidelsesutvikling

Når du har mestret det grunnleggende, kan du utforske mer avanserte teknikker for utvidelsesutvikling:

• Language Server Protocol (LSP): Bruk LSP til å gi avansert språkstøtte, for eksempel kodefullføring, diagnostikk og refaktorering, for et bestemt språk. Populære LSP-implementeringer inkluderer de for Python, Java og Go.
• Feilsøkingsadaptere: Opprett tilpassede feilsøkingsadaptere for å støtte feilsøking av spesifikke programmeringsspråk eller kjøretider.
• Webviews: Bygg inn interaktive nettbaserte brukergrensesnitt i VS Code ved hjelp av webvisninger. Dette lar deg lage komplekse og visuelt tiltalende utvidelser.
• Temaer: Opprett tilpassede temaer for å endre utseendet til VS Code. Mange populære temaer er tilgjengelige på VS Code Marketplace.
• Tastebindinger: Definer tilpassede tastebindinger for å tilordne bestemte handlinger til hurtigtaster.

Internasjonalisering og lokalisering (i18n og L10n)

For å nå et globalt publikum, bør du vurdere å internasjonalisere og lokalisere utvidelsen din. Dette innebærer å tilpasse utvidelsen din til å støtte forskjellige språk og regioner.

• Eksternaliser strenger: Flytt alle brukerrettede strenger til separate ressursfiler.
• Bruk VS Codes i18n API: VS Code tilbyr API for å laste inn lokaliserte strenger basert på brukerens lokalisering.
• Støtt flere språk: Gi ressursfiler for forskjellige språk.
• Vurder høyre-til-venstre (RTL) layout: Hvis utvidelsen din viser tekst, må du sørge for at den støtter RTL-språk som arabisk og hebraisk.

Publisere utvidelsen din

Når utvidelsen din er klar, kan du publisere den til VS Code Marketplace slik at andre kan bruke den:

1. Opprett en Azure DevOps-organisasjon: Du trenger en Azure DevOps-organisasjon for å publisere utvidelsen din. Hvis du ikke har en, kan du opprette en gratis konto på Azure DevOps-nettsiden.
2. Installer `vsce`-verktøyet: VS Code Extension Manager (`vsce`) er et kommandolinjeverktøy for pakking og publisering av utvidelser. Installer den globalt ved hjelp av npm:

            npm install -g vsce
            

              
                Copy
              
            
          

3. Opprett en utgiver: En utgiver er en identitet som eier utvidelsene dine på Marketplace. Opprett en utgiver ved hjelp av kommandoen `vsce create-publisher`. Du må oppgi et utgivernavn og et personlig tilgangstoken (PAT) fra Azure DevOps.
4. Generer et personlig tilgangstoken (PAT): I Azure DevOps går du til "Brukerinnstillinger" -> "Personlige tilgangstokener" og oppretter et nytt PAT med "Marketplace (Publiser)"-omfanget.
5. Pakk utvidelsen din: Bruk kommandoen `vsce package` til å pakke utvidelsen din i en `.vsix`-fil.
6. Publiser utvidelsen din: Bruk kommandoen `vsce publish` til å publisere utvidelsen din til Marketplace. Du må oppgi utgivernavnet ditt og PAT.

Beste fremgangsmåter for utvidelsesutvikling

Følg disse beste fremgangsmåtene for å lage VS Code-utvidelser av høy kvalitet og som er enkle å vedlikeholde:

• Bruk TypeScript: TypeScript gir statisk typing og forbedrer kodevedlikeholdbarheten.
• Skriv enhetstester: Skriv enhetstester for å sikre at utvidelsen din fungerer som den skal.
• Bruk en linter: Bruk en linter som ESLint for å håndheve konsistens i kodestilen.
• Dokumenter koden din: Skriv klar og konsis dokumentasjon for utvidelsen din.
• Håndter feil på en elegant måte: Implementer riktig feilhåndtering for å forhindre at utvidelsen din krasjer.
• Optimaliser ytelsen: Optimaliser utvidelsens ytelse for å unngå å bremse VS Code.
• Følg VS Code API-retningslinjene: Følg VS Code API-retningslinjene for å sikre at utvidelsen din integreres godt med editoren.
• Vurder tilgjengelighet: Gjør utvidelsen din tilgjengelig for brukere med funksjonshemninger.

Fellesskapsressurser

Her er noen verdifulle ressurser for å lære mer om VS Code-utvidelsesutvikling:

• VS Code Extension API-dokumentasjon: Den offisielle dokumentasjonen for VS Code Extension API.
• VS Code Extension-eksempler: En samling eksempler på utvidelser som demonstrerer ulike funksjoner i API-et.
• VS Code Marketplace: Bla gjennom VS Code Marketplace for å finne eksisterende utvidelser og lære av koden deres.
• Stack Overflow: Still spørsmål og finn svar knyttet til VS Code-utvidelsesutvikling.
• GitHub: Utforsk åpen kildekode VS Code-utvidelser og bidra til fellesskapet.

Konklusjon

Utvikling av VS Code-utvidelser er en kraftig måte å tilpasse kodemiljøet ditt, øke produktiviteten og dele løsningene dine med det globale utviklerfellesskapet. Ved å følge denne omfattende veiledningen kan du mestre kunsten å utvikle utvidelser og lage innovative verktøy som forbedrer VS Code-opplevelsen for deg selv og andre. Husk å omfavne fellesskapet, bidra til åpen kildekode-prosjekter, og kontinuerlig lære og utforske den stadig utviklende verdenen av VS Code-utvidelsesutvikling. Lykke til og god koding!